<template>
  <div class="main">
    <NewCard title="订单详情" isright="isright" v-if="showdet == 0">
      <template slot="right">
        <span class="hintRight" @click="probleminfo">
          已完成
          <i class="el-icon-arrow-right"></i>
        </span>
      </template>
      <div class="pay">
        <div class="pay_main">
          <el-row>
            <el-col :span="24">
              <p class="inputTitle">订单信息</p>
              <ul class="detailList">
                <li>
                  <span>订单编号</span>
                  <div class="detailPage">
                    <p>{{ orderinfo.orderNo }}</p>
                  </div>
                </li>
                <li>
                  <span>订单类型</span>
                  <div class="detailPage">
                    <p>
                     内容下载
                    </p>
                  </div>
                </li>
                <li>
                  <span>创建时间</span>
                  <div class="detailPage">
                    <p>{{ orderinfo.createdTime }}</p>
                  </div>
                </li>
                <li>
                  <span>订单金额</span>
                  <div class="detailPage">
                    <p>{{ orderinfo.amount }}</p>
                  </div>
                </li>
              </ul>
            </el-col>
            <el-col :span="24">
              <p class="inputTitle">接收信息</p>
              <ul class="detailList">
                <li>
                  <span>文件格式</span>
                  <div class="detailPage">
                    <p>
                    
                      <!-- {{ orderinfo.goods && orderinfo.goods.receiveFormat }} -->
                      PDF
                    </p>
                  </div>
                </li>
                <li>
                  <span>接收邮箱</span>
                  <div class="detailPage">
                    <p>{{ orderinfo.email }}</p>
                  </div>
                </li>
              </ul>
            </el-col>
            <el-col :span="24">
              <p class="inputTitle">支付信息</p>
              <ul class="detailList" style="border-bottom: none">
                <li>
                  <span>支付账号</span>
                  <div class="detailPage">
                    <p>{{orderinfo.phone}}</p>
                  </div>
                </li>
                <li>
                  <span>支付时间</span>
                  <div class="detailPage">
                    <p>{{ orderinfo.payTime }}</p>
                  </div>
                </li>
                <li>
                  <span>应付金额</span>
                  <div class="detailPage">
                    <p>{{ orderinfo.amount}}</p>
                  </div>
                </li>
                <li>
                  <span>实付金额</span>
                  <div class="detailPage">
                    <p>{{ orderinfo.amount }}</p>
                  </div>
                </li>
              </ul>
            </el-col>
          </el-row>
        </div>
        <div class="payBtn">
          <el-button round @click="probleminfo">内容详情</el-button>
        </div>
      </div>
    </NewCard>
    <div class="showinfo" v-if="showdet == 1">
      <ContractTemplate1 :orderinfo="orderinfo.goods" :listActive="detailBoughtShow"></ContractTemplate1>
    </div>
  </div>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import ContractTemplate1 from "./contractTemplate1.vue";
import { changeType } from "@/wss/utils/wss.js";
import { getExpertListApi } from "@/BMViews/api/work/expert.js";

export default {
  name: "completes",
  props: {
    orderinfo: {
      type: Object,
      default: {},
    },
  },
  components: { NewCard, ContractTemplate1 },
  data() {
    return {
      //专家列表
      expertList: [],
      // 当前咨询订单专家名字
      currentOrderName: "",
      isright: true, //显示时间提示支付
      showdet: 0,
      detailBoughtShow: this.orderinfo.type,
    };
  },
  watch: {
    orderinfo: {
      deep: true,
      handler(val) {
        // 找出当前咨询的专家
        this.currentOrderName = this.expertList.find(
          (item) => val.expertId == item.id
        )?.name;
      },
    },
  },
  created() {
    // 获取专家列表
    this.getExpertListFn();
    this.orderinfo.goods.title=this.orderinfo?.title
  },
  mounted(){
    this.$bus.$on('returnBtnShow',()=>{
      this.showdet = 0
    })
  },
  computed: {
    
    getType() {
      return (type) => changeType(type);
    },
  },
  methods: {
    // 获取专家
    async getExpertListFn() {
      let { rows, code } = await getExpertListApi();
      if (code != 200) return;
      this.expertList = JSON.parse(JSON.stringify(rows));
    },
    probleminfo() {
      this.showdet = 1;
    },
  },
};
</script>

<style scoped>
.main {
  height: 100%;
}
.hintRight {
  font-size: 14px;
  color: #999;
  font-weight: bold;
}
.hintRight > i {
  font-weight: bold;
}
::v-deep .el-card__body {
  position: relative;
}
ul,
p {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pd30 {
  padding: 0 30px;
}
/* 支付信息 */
.pay_main {
  margin-bottom: 70px;
  margin-top: 15px;
}
.pay_main .el-card {
  border-radius: 12px;
}
::v-deep .pay_main .el-card__body {
  padding: 20px;
}
.pay_main h3 {
  margin: 0;
  margin-bottom: 12px;
  font-size: 16px;
  color: #333;
  font-weight: bold;
}
.pay_main p {
  font-size: 14px;
  color: #999;
  margin: 0;
  line-height: 24px;
}
.pay_main .el-row {
  margin-top: 15px;
}
::v-deep .pay_main .el-row .el-input__inner {
  border-radius: 8px;
  height: 44px;
  line-height: 44px;
}
.pay_main .el-row .acceptEmail {
  border: 0;
  padding: 5px 0;
  margin: 7px 0;
  margin-right: 10px;
  font-size: 14px;
  color: #bababa;
  background: #fff;
  cursor: pointer;
}
.pay_main .el-row .acceptEmail:hover {
  color: #f87a23;
}
.pay_main .inputTitle {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}
.pay_main .inputTitle span {
  font-size: 14px;
  color: #999;
  font-weight: 400;
}
::v-deep .pay_main .el-tabs__header {
  border: 0;
  margin-bottom: 24px;
}
::v-deep .pay_main .el-tabs__nav {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border: 0;
}
::v-deep .pay_main .el-tabs__item {
  width: 49%;
  border-radius: 8px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  border: 0;
  background-color: #fafafa;
}
::v-deep .pay_main .el-tabs__item.is-active {
  background-color: #f1f3ff;
  color: #39486f;
}
::v-deep .pay_main .el-tabs__item:hover {
  color: #39486f;
}

/* 内容详情列表 */
.detailList {
  border-bottom: 1px solid #ecedf0;
  padding-bottom: 15px;
  margin-bottom: 30px;
}
.detailList li {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
}
.detailList li > span {
  display: block;
  width: 17%;
  font-size: 14px;
  color: #999;
}
.detailList li>div>a{
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
}
.detailList li .detailPage {
  width: 83%;
}
.detailList li .detailPage > p {
  width: 100%;
  font-size: 14px;
  color: #222;
}

.showinfo {
  height: 100%;
}

/* 按钮 */
.payBtn {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 9;
  width: 100%;
  background-color: #fff;
  border-top: 1px solid #ecedf0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 30px;
}
.payBtn p {
  margin: 0;
  font-size: 14px;
  font-weight: bold;
}
.payBtn p > span {
  color: #f87a23;
  font-size: 16px;
}
.payBtn .el-button {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
  font-size: 14px;
  padding: 10px 50px;
}
.payBtn .el-button:hover {
  opacity: 0.9;
}
</style>
